<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<title>Agile Lite</title>
		<link rel="stylesheet" href="assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="assets/agile/css/ratchet/css/ratchet.min.css">
		<link rel="stylesheet" href="assets/app/css/app.css">
	</head>
	<body>
		<div id="section_container">
			<section id="index_section" data-role="section" class="active">
				<header class="bar bar-nav">
				  	<a class="icon icon-left-nav pull-left" data-toggle="back" href="#"></a>
				  	<a class="icon icon-info pull-right"data-toggle="html" href="#about" data-transition="slidedown"></a>
				  	<h1 class="title">Agile Lite</h1>
				</header>
				<article data-role="article" id="flat_article" data-scroll="verticle" class="active" style="top:44px;bottom:50px;">
					<div class="scroller">
						<ul class="table-view">
							<li class="table-view-cell table-view-divider">Controllers</li>
						  	<li class="table-view-cell media">
						    	<a href="#signle" data-toggle="html" class="navigate-right">						      		
						        	<span class="badge bg-pomegranate white">HOT</span>
						        	单页模式
						        	<p>支持的单页模式控制器，如：section、article、modal、aside等</p>
						    	</a>
						  	</li>
						  	<li class="table-view-cell media">
						    	<a href="#multi" data-toggle="html" class="navigate-right">      		
						        	多页模式
						        	<p>支持的多页模式控制器，比如html</p>
						    	</a>
						  	</li>
						  	<li class="table-view-cell media">
						    	<a href="#work" data-toggle="html" class="navigate-right">      		
						        	控制器原理
						        	<p>控制器与组件的工作原理</p>
						    	</a>
						  	</li>
						  	
						  	<li class="table-view-cell table-view-divider">Components</li>
						  	<li class="table-view-cell media">
						    	<a href="#button" data-toggle="html" class="navigate-right">						      		
						        	按钮组件
						        	<p>button和toggle按钮组件</p>
						    	</a>
						  	</li>
						  	<li class="table-view-cell media">
						    	<a href="#menu" data-toggle="html" class="navigate-right">     		
						        	<span class="badge bg-pomegranate white">HOT</span>
						        	菜单组件
					            	<p>tabbar、menubar和grid菜单</p>
						    	</a>
						  	</li>
						  	<li class="table-view-cell media">
						    	<a href="#list" data-toggle="html" class="navigate-right">     		
						        	列表组件
					            	<p>单行/多行列表以及其他列表模板</p>
						    	</a>
						  	</li>
						  	<li class="table-view-cell media">
						    	<a href="#list_more" data-toggle="html" class="navigate-right">     		
						        	复杂列表
					            	<p>邮件列表和下载列表</p>
						    	</a>
						  	</li>
						  </li>
						  	<li class="table-view-cell media">
						    	<a href="#list_edit" data-toggle="html" class="navigate-right">     		
						        	列表滑动与编辑
					            	<p>滑动删除与批量处理</p>
						    	</a>
						  	</li>
						  	<li class="table-view-cell media">
						    	<a href="#form" data-toggle="html" class="navigate-right">     		
						        	表单组件
					            	<p>表单组件及其不同布局</p>
						    	</a>
						  	</li>
						  	<li class="table-view-cell media">
						    	<a href="#popup" data-toggle="html" class="navigate-right">     		
						      		<span class="badge bg-pomegranate white">HOT</span>
						        	弹窗组件
					            	<p>alert、confirm以及action sheet等</p>
						    	</a>
						  	</li>
						  	<li class="table-view-cell media">
						    	<a href="#aside" data-toggle="html" class="navigate-right">     		
						        	<span class="badge bg-pomegranate white">HOT</span>
						        	侧边栏组件
					            	<p>aside侧边栏组件、手势驱动</p>
						    	</a>
						  	</li>
						  	<li class="table-view-cell media">
						    	<a href="#calendar" data-toggle="html" class="navigate-right">     		
						        	<span class="badge bg-pomegranate white">HOT</span>
						        	日历组件
					            	<p>万年历、日程管理</p>
						    	</a>
						  	</li>

						  	
						  	<li class="table-view-cell table-view-divider">Scroll &amp; Lazyload</li>
						  	<li class="table-view-cell media">
						    	<a href="#scroll" data-toggle="html" class="navigate-right">     		
						        	滚动组件
					            	<p>横向和垂直滚动组件</p>
						    	</a>
						  	</li>
						  	<li class="table-view-cell media">
						    	<a href="#refresh" data-toggle="html" class="navigate-right">     		
						        	<span class="badge bg-pomegranate white">HOT</span>
						        	刷新组件
					            	<p>refresh上拉和下拉刷新组件</p>
						    	</a>
						  	</li>
						  	<li class="table-view-cell media">
						    	<a href="#slider" data-toggle="html" class="navigate-right">     		
						        	滑动组件
					            	<p>slider与slider page滑动页</p>
						    	</a>
						  	</li>
						  	<li class="table-view-cell media">
						    	<a href="#lazyload" data-toggle="html" class="navigate-right">     		
						        	<span class="badge bg-pomegranate white">HOT</span>
						        	懒人加载
					            	<p>懒人加载延迟加载图片</p>
						    	</a>
						  	</li>
						  	
						  	<li class="table-view-cell table-view-divider">Base</li>
						  	<li class="table-view-cell media">
						    	<a href="#color" data-toggle="html" class="navigate-right">     		
						        	<span class="badge bg-pomegranate white">HOT</span>
						        	颜色样式
					            	<p>可选的文字颜色和背景颜色</p>
						    	</a>
						  	</li>
						  	<li class="table-view-cell media">
						    	<a href="#icon" data-toggle="html" class="navigate-right">     		
						        	常用字体
					            	<p>各种类型的字体图</p>
						    	</a>
						  	</li>
						  	<li class="table-view-cell media">
						    	<a href="#icon_form" data-toggle="html" class="navigate-right">     		
						        	表单字体
					            	<p>用于表单的字体图</p>
						    	</a>
						  	</li>
						  	<li class="table-view-cell media">
						    	<a href="#icon_logo" data-toggle="html" class="navigate-right">     		
						        	Logo字体
					            	<p>部分企业logo的字体图</p>
						    	</a>
						  	</li>
						  	<li class="table-view-cell media">
						    	<a href="#animate" data-toggle="html" class="navigate-right">     		
						        	<span class="badge bg-pomegranate white">HOT</span>
						        	CSS3动画
					            	<p>各种风格的CSS3动画</p>
						    	</a>
						  	</li>
						  	
						  	<li class="table-view-cell table-view-divider">Template</li>
						  	<li class="table-view-cell media">
						    	<a href="#arttemplate" data-toggle="html" class="navigate-right">     		
						        	artTemplate模板
					            	<p>artTemplate模板native语法示例</p>
						    	</a>
						  	</li>
						  	<li class="table-view-cell media">
						    	<a href="#agiletemplate" data-toggle="html" class="navigate-right">     		
						        	<span class="badge bg-pomegranate white">HOT</span>
						        	Agile模板注入
					            	<p>Agile基于artTemplate封装的模板注入</p>
						    	</a>
						  	</li>
						</ul>
						
    				</div>  
					<a data-role="scrollTop" data-toggle="scrollTop" href="#flat_article" style="bottom:56px;right:4px;">
						<img src="assets/app/img/top.png" style="border: 1px solid #efefef;"></img>
					</a>
				</article>
				
				
				
				<article data-role="article" id="ratchet_article" data-scroll="verticle" style="top:44px;bottom:50px;">
					<div class="scroller">
						<div class="card">
							<ul class="table-view">
								<li class="table-view-cell table-view-divider">Base</li>
								<li class="table-view-cell"><a class="navigate-right" data-toggle="section" href="#ratchet_layout_section">基本布局</a></li>
							    <li class="table-view-cell"><a class="navigate-right" data-toggle="section" href="#ratchet_button_section">按钮组件</a></li>
							    <li class="table-view-cell"><a class="navigate-right" data-toggle="section" href="#ratchet_list_section">列表组件</a></li>
							    <li class="table-view-cell table-view-divider">Others</li>
							    <li class="table-view-cell"><a class="navigate-right" data-toggle="section" href="#ratchet_form_section">表单样式</a></li>
							    <li class="table-view-cell"><a class="navigate-right" data-toggle="section" href="#ratchet_icon_section">字体图</a></li>
							</ul>
						</div>
					</div>
				</article>
				
				<article data-role="article" id="case_article" data-scroll="verticle" style="top:44px;bottom:50px;">
					<div class="scroller">
						<ul class="table-view">
							<li class="table-view-cell table-view-divider">Cases</li>
						  	<li class="table-view-cell media">
						    	<a href="http://miap.cc:1001/process/service/weixinlite/www/index.html" data-toggle="html" class="navigate-right">     		
						        	微信JS SDK示例
					            	<p>集成微信JS SDK，进行授权认证和支付</p>
						    	</a>
						  	</li>
						  	<li class="table-view-cell media">
						    	<a href="http://miap.cc:1001/process/service/ednlite/www/index.html" data-toggle="html" class="navigate-right">     		
						        	论坛类示例
					            	<p>ExMobi开发者论坛（discuz）APP</p>
						    	</a>
						  	</li>
						  	<li class="table-view-cell media">
						    	<a href="http://miap.cc:1001/process/service/p9line/index.html" data-toggle="html" class="navigate-right">     		
						        	商城类示例
					            	<p>微店、商城类的APP展示</p>
						    	</a>
						  	</li>
						</ul>
					</div>
				</article>
				
				<article data-role="article" id="info_article" data-scroll="verticle" style="top:44px;bottom:50px;">
					<div class="scroller padded">
						<h3>UI使用</h2>
						<p>Agile Lite是一个无关UI的框架。原则上任何具有独立CSS样式的UI都可以在Agile Lite中使用。</p>
						
						<h3>元素控制</h2>
						<p>所有的UI如果遵循Agile Lite的控制器原则都可以使用Agile Lite的一整套逻辑。</p>
						<p>原则如下：</p>
						<p>1、所有需要被控制的元素均需要具备data-role="{role}"属性，比如:data-role="section"。如果为非元素类，比如关闭窗口，则不需要</p>
						<p>2、要控制某个元素，只需要设置在触发控制的元素上添加data-toggle="{role}"即可，比如:data-toggle="section"</p>
						
						<h3>扩展</h2>
						<p>Agile Lite支持对控制器（data-toggle）和组件（data-role）的扩展</p>
					</div>
				</article>
				
				<nav class="bar bar-tab">
				  	<a class="tab-item active" data-role="tab" data-toggle="article" href="#flat_article">
				    	<span class="icon icon-pages"></span>
				    	<span class="tab-label">FlatUI</span>
				  	</a>
				  	<a class="tab-item" data-role="tab" data-toggle="article" href="#ratchet_article">
				    	<span class="icon icon-person"></span>
				    	<span class="tab-label">Ratchet</span>
				  	</a>
				  	<a class="tab-item" data-role="tab" data-toggle="article" href="#case_article">
				    	<span class="icon icon-pages"></span>
				    	<span class="tab-label">案例</span>
				  	</a>
				  	<a class="tab-item" data-role="tab" data-toggle="article" href="#info_article">
				    	<span class="icon icon-gear"></span>
				    	<span class="tab-label">UI说明</span>
				  	</a>
				</nav>
			</section>
		</div>
		
		<!--- third --->
		<script src="assets/third/zepto/zepto.min.js"></script>
		<script src="assets/third/iscroll/iscroll-probe.js"></script>
		<script src="assets/third/arttemplate/template-native.js"></script>	
		<!-- agile -->
		<script type="text/javascript" src="assets/agile/js/agile.js"></script>		
		<!--- bridge --->
		<script type="text/javascript" src="assets/bridge/exmobi.js"></script>
		<script type="text/javascript" src="assets/bridge/agile.exmobi.js"></script>
		<!-- app -->
		<script type="text/javascript" src="assets/app/js/app.js"></script>
	</body>
</html>